<template>
<div class="corp-container-box">
  <!-- 导航 -->
  <div class="corp-nav">
      <div class="container-1200">
          <!-- 左边登录注册 -->
          <div class="corp-nav-lr">
              <nuxt-link to="/login">登录</nuxt-link>
              <nuxt-link to="/register">注册</nuxt-link>
              <nuxt-link to="/" class="back-shouye">返回云南物流云</nuxt-link>
          </div>
          <!-- 右边其他页面 -->
          <div class="corp-nav-right">
            <nuxt-link to="/chain">绿色食品供应链</nuxt-link>
            <nuxt-link to="/specia">特色物流</nuxt-link>
            <nuxt-link to="/">工商信息</nuxt-link>
            <nuxt-link to="/"  class="corp-about">关注他</nuxt-link>
          </div>

      </div>
  </div>
  <!-- 内容导航 -->
  <div class="corp-subtitle container-1200">
    <!-- 左边内容 -->
      <div class="corp-subtitle-left">
        <div class="corp-comapy-img">
            <img src="./../.././static/img/corp/companyIcon.png" alt="">  
        </div>
        <h2>云南国际物流云</h2>
      </div>
      <!-- 右边对应内容跳转 -->
      <div class="corp-content-nav">
        <ul>
          <li class="active">首页</li>
          <li>公司简介</li>
          <li>业务动态</li>
          <li>主营业务</li>
          <li>公司荣誉</li>
          <li>联系我们</li>
        </ul>
      </div>
  </div>
  <!-- 轮播 -->
  <div class="a-banner-box">
      <a-carousel arrows autoplay>
           <!-- 左右切换按钮 -->
          <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow prevArrow"></div>
          <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow nextArrow"></div>
          <!-- 轮播图 -->
          <div class="company-suggest">
            <div class="company-content"> 
                <div class='company-contentTile'>
                    <h2>云南国际现代物流云</h2>
                    <p>YUNNAN INTERNATIONAL MODERN LOGISTICS CLOUD</p>
                </div>
                <p>专业的信息技术公司，帮助客户实现核心业务的全面数字化转型，并以独创的数据平台和行业解决方案为行业客户赋能，支持其对各类数据资产的收集整理、价值挖掘和应用创新。公司总部位于北京，目前在全国设有3个研发中心，9个分公司和9个办事处，并构建了覆盖全国的营销和服务网络。</p>
            </div>
          </div>
          <div class="company-suggest">
            <div class="company-content"> 
                <div class='company-contentTile'>
                    <h2>云南国际现代物流云</h2>
                    <p>YUNNAN INTERNATIONAL MODERN LOGISTICS CLOUD</p>
                </div>
                <p>专业的信息技术公司，帮助客户实现核心业务的全面数字化转型，并以独创的数据平台和行业解决方案为行业客户赋能，支持其对各类数据资产的收集整理、价值挖掘和应用创新。公司总部位于北京，目前在全国设有3个研发中心，9个分公司和9个办事处，并构建了覆盖全国的营销和服务网络。
                </p>
            </div>
          </div>
      </a-carousel>
        <!-- 资产 -->
      <div class="corp-total-nums">
          <div class="corp-part-all">
              <span>2,600</span>
              <span>总访问量</span>
          </div>
          <div class="corp-part-people">
              <span>999</span>
              <span>总关注人数</span>
          </div>
          <div class="corp-part-card">
              <span>2,600</span>
              <span>总名片投递人数</span>
          </div>
      </div>
      <!-- 分享此公司 -->
      <div class="share-company">
          <div class="share-company-img">
            <img src="../../static/img/corp/rightErweima.png">
          </div>
          <span>扫一扫</span>
          <span>分享此公司</span>
      </div>
  </div>
  <!-- 业务动态 -->
  <div class="bussine-dyanmics">
        <div class="total-parts-main">
            <div class="total-part">
                <span>业务动态</span>
                <span>Business dynamics</span>
            </div>
            <!-- 切换 -->
            <div class="total-change-part">
                <ul>
                  <li :class="type=='0'?'actives':''" @click="changePart('0')">物流车源</li>
                  <li :class="type=='1'?'actives':''" @click="changePart('1')">物流货源</li>
                  <li :class="type=='2'?'actives':''" @click="changePart('2')">物流专线</li>
                  <li :class="type=='3'?'actives':''" @click="changePart('3')">物流仓储</li>
                </ul>
            </div>
        </div>
        <!-- 模块内容 -->
      <div class="bussine-part-main">
         <ul>
            <li>
               <div class="buss-city">北京市 - 云南省 昆明市</div>
               <div class="buss-money">运费:<i>￥</i><span>69</span>起</div>
               <div class="buss-price">最低票价:<span>228</span>元</div>
               <div class="buss-time">时效:99天</div>
            </li>
            <li>
               <div class="buss-city">北京市 - 云南省 昆明市</div>
               <div class="buss-money">运费:<i>￥</i><span>69</span>起</div>
               <div class="buss-price">最低票价:<span>228</span>元</div>
               <div class="buss-time">时效:99天</div>
            </li>
            <li>
               <div class="buss-city">北京市 - 云南省 昆明市</div>
               <div class="buss-money">运费:<i>￥</i><span>69</span>起</div>
               <div class="buss-price">最低票价:<span>228</span>元</div>
               <div class="buss-time">时效:99天</div>
            </li>
            <li>
               <div class="buss-city">北京市 - 云南省 昆明市</div>
               <div class="buss-money">运费:<i>￥</i><span>69</span>起</div>
               <div class="buss-price">最低票价:<span>228</span>元</div>
               <div class="buss-time">时效:99天</div>
            </li>
            <li>
               <div class="buss-city">北京市 - 云南省 昆明市</div>
               <div class="buss-money">运费:<i>￥</i><span>69</span>起</div>
               <div class="buss-price">最低票价:<span>228</span>元</div>
               <div class="buss-time">时效:99天</div>
            </li>
            <li>
               <div class="buss-city">北京市 - 云南省 昆明市</div>
               <div class="buss-money">运费:<i>￥</i><span>69</span>起</div>
               <div class="buss-price">最低票价:<span>228</span>元</div>
               <div class="buss-time">时效:99天</div>
            </li>
            <li>
               <div class="buss-city">北京市 - 云南省 昆明市</div>
               <div class="buss-money">运费:<i>￥</i><span>69</span>起</div>
               <div class="buss-price">最低票价:<span>228</span>元</div>
               <div class="buss-time">时效:99天</div>
            </li>
            <li>
               <div class="buss-city">北京市 - 云南省 昆明市</div>
               <div class="buss-money">运费:<i>￥</i><span>69</span>起</div>
               <div class="buss-price">最低票价:<span>228</span>元</div>
               <div class="buss-time">时效:99天</div>
           </li>
         </ul>
      </div>
  </div>
  <!-- 主营业务 -->
  <div class="main-bussiness-work">
       <div class="main-buss-content">
          <div class="total-part">
                <span>主营业务</span>
                <span>Main business</span>
            </div>
       </div>
       <div class="main-buss-box">
          <ul>
              <li>
                  <div class="main-buss-pic">
                      <img src="../../static/img/corp/bussine1.png">
                  </div>
                  <div class="main-server-title">境外物流运输服务</div>
                  <div class="main-concat">
                     <span>联系人：张三</span>
                     <span>联系方式：15689504938</span>
                  </div>
              </li>
              <li>
                  <div class="main-buss-pic">
                      <img src="../../static/img/corp/busine2.png"> 
                  </div>
                  <div class="main-server-title">境外物流运输服务</div>
                  <div class="main-concat">
                     <span>联系人：张三</span>
                     <span>联系方式：15689504938</span>
                  </div>
              </li>
              <li>
                  <div class="main-buss-pic">
                      <img src="../../static/img/corp/busine3.png">
                  </div>
                  <div class="main-server-title">境外物流运输服务</div>
                  <div class="main-concat">
                     <span>联系人：张三</span>
                     <span>联系方式：15689504938</span>
                  </div>
              </li>
          </ul>
       </div>
  </div>
  <!-- 公司荣誉 -->
  <div class="main-bussiness-work honor-work">
       <div class="main-buss-content">
          <div class="total-part">
                <span>公司荣誉</span>
                <span>Main business</span>
            </div>
       </div>
       <div class="main-buss-box">
          <ul>
              <li>
                  <div class="main-buss-pic">
                      <img src="../../static/img/corp/honor1.png">
                  </div>
                  <div class="main-server-title">境外物流运输服务</div>
                  <div class="main-concat">获奖时间：2018-04-08</div>
              </li>
              <li>
                  <div class="main-buss-pic">
                      <img src="../../static/img/corp/honor2.png">
                  </div>
                  <div class="main-server-title">境外物流运输服务</div>
                  <div class="main-concat">获奖时间：2018-04-08</div>
              </li>
              <li>
                  <div class="main-buss-pic">
                      <img src="../../static/img/corp/honor3.png">
                  </div>
                  <div class="main-server-title">境外物流运输服务</div>
                  <div class="main-concat">获奖时间：2018-04-08</div>
              </li>
          </ul>
       </div>
  </div>
  <!-- 公司简介 -->
  <div class="corp-company-detail">
      <div class="corp-comapny-content">
          <div class="corp-com-title">
            <span>公司简介</span>
            <span>Service/Honor</span>
          </div>
          <div class="company-container">
            <p>北京荣之联科技股份有限公司（002642.sz），是专业的信息技术公司，帮助客户实现核心业务的全面数字化转型，并以独创的数据平台和行业解决方案为行业客户赋能，支持其对各类数据资产的收集整理、价值挖掘和应用创新。公司总部位于北京，目前在全国设有3个研发中心，9个分公司和9个办事处，并构建了覆盖全国的营销和服务网络。</p>
            <span>-</span>
          </div>
      </div>
      <!-- 公司图片 -->
      <div class="corp-company-pic">
          <img src="../../static/img/corp/company.png">
      </div>
  </div>
  <!-- 底部 -->
  <div class="corp-footer">
       <div class="corp-footer-box">
          <!-- 联系我们 -->
          <div class="concat-part">
                <span>联系我们</span>
                <span>Contact Us</span>
          </div>
          <div class="foot-concat">
              <div class="cocat-links">
                <p>地址：北京市建外soho东区2号楼1032室</p>
                <p>电话：010-690545345</p>
                <p>传真：000-6666645454</p>
              </div>
              <div class="cocat-links">
                <p>邮编：10000000</p>
                <p>手机：13532944324/123049384029</p>
                <p>邮箱：touche@oiuweo.com</p>
              </div>
              <div class="corp-swiper">
                  <ul>
                    <li>
                        <div class="erwema-sao">
                          <img src="../../static/img/corp/bottomErWeiMa.png">
                        </div>
                        <span>公众号二维码</span>
                    </li>
                    <li>
                        <div class="erwema-sao">
                         <img src="../../static/img/corp/bottomErWeiMa.png">
                        </div>
                        <span>公司客服</span>
                    </li>
                    <li>
                       <div class="erwema-sao">
                         <img src="../../static/img/corp/bottomErWeiMa.png">
                       </div>
                       <span>APP端下载</span>
                    </li>
                  </ul>
              </div>
          </div>

       </div>
  </div>
  <!-- 侧边栏 -->
<div class="corp-slide-nav">
  <div class="slide-about">
      <ul>
        <li class="slide-tel" style="background: #F9A70A;">
          <div class="ab-img">
              <img src="../../static/img/corp/tel.png">
          </div>
          <span style="color: #fff;">电话</span>
          <div class="ab-tel">15652877969</div>
        </li>
        <li @click='change'>
          <div class="ab-img">
             <img v-if="show" src="../../static/img/corp/heart.png">
             <img v-if="!show" src="../../static/img/corp/clickHeart.png">
          </div>
          <span :style="cssST">关注</span>
        </li>
        <li @click="changeCard">
          <div class="ab-img">
             <img v-if="sedShow" src="../../static/img/corp/card.png">
             <img v-if="!sedShow" src="../../static/img/corp/clickedCard.png">
          </div>
          <span :style="sedColor">发名片</span>
        </li>
        <li>
			<a href="#">
			  <div class="ab-img ab-back">
				  <img src="../../static/img/corp/back.png">
			  </div>
			  <span>返回</span>
			</a>
        </li>
      </ul>
  </div>
</div>
</div>
</template>

<script>

export default {
  data() {  
    return {
      type:  0,
      show:true,
      sedShow:true,
      cssST:'',
      sedColor: '',
    };
  },
  components: {

  },
  created: function() {

  },
  methods: {
    //关注
    change(){
      this.show = false,
      this.cssST = "color:#FF133F"
    },
    changeCard(){
       this.sedShow = false,
       this.sedColor = "color:#15837A"
    },
    changePart(type){
       this.type = type;
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/css/corp/corp.scss";
</style>
